

const path = require('path');
// 热更新第二步
const webpack = require('webpack');
// 导入在内存中生成HTML页面的插件
// 只要是插件，都一定要放到plugins节点中去
// 这个插件的作用：
// 1.自动在内存中根据指定的页面生成一个内存的页面
// 2.自动把打包好的bundle.js文件追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');


const VueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin.js'); //  Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin

// 这个配置文件 ，就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件
    output: { // 出口，输出文件的相关配置
        path: path.join(__dirname, './dist'), // 指定打包好的文件，输出到哪个目录去
        filename: 'bundle.js' //指定输出文件的名称
    },
    devServer: { // 配置dev-server命令参数的第二种形式，相对来说，比较麻烦
        open: true, // 是否自动打开浏览器（默认false）
        port: 3000, // 设置启动浏览器时的运行端口
        // contentBase: 'src', // 指定托管的根目录
        // hot: true // 是否启动热更新（默认false） 热更新第一步

    },
    plugins: [ // 所有webpack配置插件的节点
        new webpack.HotModuleReplacementPlugin(), // new一个热更新的模块对象，热更新的第三步
        new htmlWebpackPlugin({ // 创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html'  //指定生成页面的名称

        }),
        new VueLoaderPlugin(),
    ],
    module:{ // 这个节点，用于配置所有的第三方模块加载器
        rules:[ // 所有第三方模块的匹配规则
            {test: /\.css$/, use:['style-loader', 'css-loader']}, // 配置处理.css文件的第三方loader规则，从数组后面开始匹配。
            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 配置处理.less文件的第三方loader规则，从数组后面开始匹配。
            {test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']}, // 配置处理.scss文件的第三方loader规则，从数组后面开始匹配。
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=345&name=[hash:8]-[name].[ext]'}, // 配置处理图片文件的第三方loader规则，从数组后面开始匹配。
            // limit给定的值，是图片的大小，单位是byte，如果我们引用的图片大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值
            // 则会被转为base64的字符串。 hash和个数不要有空格。
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},// 处理字体文件
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, // 配置babel来转换高级的ES语法
            {test: /\.vue$/, use: 'vue-loader'} // 处理 .vue 文件
        ]
    },
    resolve: {
        alias:{ // 设置vue被导入时候的包的路径
            'vue$': 'vue/dist/vue.js'
        }
    }
};


// 当我们在控制台直接输入webpack命令执行的时候，webpack做了以下几步：
// 1.首先，webpack发现，我们并没有通过命令的形式，给他指定入口和出口
// 2.webpack就会去项目的根目录中，查找一个叫做“webpack.config.js”的配置文件
// 3.当找到配置文件后，webpack回去执行解析这个配置文件，当解析执行完配置文件之后，就得到了配置文件中导出的配置对象。
// 4.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建。
